@import "../../styl/variable.styl"
@import "../../styl/shape.styl"

.header.cover
  padding 0

.h1
  font-size 36rpx
  padding .5em 0
  text-align center

.h2.icon
  text-indent 2em

.switch
  font-size 28rpx
  padding-bottom 40rpx

  switch
    margin 0 10rpx

radio-group
  font-size 32rpx
  position relative
  padding-left 40rpx
  margin-bottom 40rpx

  &.correct
    background-color #d4edda

  &.wrong
    background-color #f8d7da

  .index
    display flex
    flex-direction column
    position absolute
    top 0
    left 0

  .icon,
  icon
    top 12rpx

.original-article
  display block
  margin-bottom 20rpx

.explanation
  font-size 28rpx
  padding 20rpx 0
  margin-bottom 20px
  border-top 1px solid #DDD
  border-bottom 1px solid #DDD

.blank-list
  display flex
  flex-direction row
  flex-wrap: wrap

.blank-item
  display flex
  flex-direction row
  width 40%
  margin-left 5%
  margin-bottom 20rpx

  &:nth-child(2n)
    margin-left 8%

  text
    color $primary-color
    display block
    font-size 24rpx
    width 40rpx

  input
    border-bottom 1px solid #CCC
    height 1.2em
    min-height 1.2em

strong.correct
  color lighten(green, 15%)

strong.wrong
  color lighten(red, 25%)

.playback
  display flex
  font-size 20rpx
  flex-direction row
  align-items center

  player
    flex 1

  text
    margin 0 10rpx

.uploading
  display flex
  flex-direction column
  justify-content center
  align-items center

  text
    margin-top 10rpx

.score
  background-color white
  border 2rpx solid currentColor
  border-radius 50%
  color $primary-color
  font-size 32rpx
  width 110rpx
  height 110rpx
  display flex
  justify-content center
  align-items center
  position relative
  padding 6rpx

  view
    border 8rpx solid $primary-color
    border-radius 50%
    content: ''
    width 100%
    height 100%
    display flex
    justify-content center
    align-items center

.nav-button
  display flex
  flex-direction row
  justify-content space-between
  align-items flex-end
  margin-top 50rpx

  button
    border-radius 50%
    display flex
    justify-content center
    align-items center

    &::after
      border-radius 50%

    .disabled
      opacity .6;
      background-color #EEE

  .recorder
    position relative

  .tips
    background-color #0006
    border-radius 20rpx
    color white
    font-size 20rpx
    position absolute
    top -45rpx
    left -80rpx
    width 250rpx
    text-align center
    line-height 2

  .record-button,
  .stop-record-button
    background-color white
    border 4rpx solid $primary-color
    display flex
    justify-content cursor
    align-items center
    width 100rpx
    height 100rpx
    padding-left 0
    padding-right 0

  .record-button image
    width 42rpx
    height 72rpx

  .stop-record-button view
    width 40rpx
    height 40rpx
    background-color $primary-color

  .back-button,
  .next-button
    background-color white
    border 4rpx solid $primary-color
    margin 0
    width 60rpx
    height 60rpx
    padding-left 0
    padding-right 0

    view
      color $primary-color
      position: relative;
      width: 24rpx;
      height: 4rpx;
      background-color: currentColor;

      &:before
        content: '';
        position: absolute;
        right: 0
        top: -5rpx;
        width: 16rpx;
        height: @width;
        border-top: solid 4rpx currentColor;
        border-right: solid 4rpx currentColor;
        transform: rotate(45deg);

  .back-button
    transform rotate(-180deg)

.teacher-card
  padding 0
  position relative

  .header
    color $primary-color
    padding 0 40rpx
    line-height 80rpx
    text-indent 40rpx

  .body
    background-color #EEE
    border-radius 0 0 .25em .25em
    font-size 28rpx
    padding 20rpx 50rpx

    text
      position relative
      text-indent 28rpx
      display block

      &:before
        content ''
        width 8rpx
        height 8rpx
        background-color $primary-color
        position absolute
        top 50%
        left 0
        margin-top -4rpx
        transform rotate(45deg)

  .avatar
    border-radius 50%
    position absolute
    top 20rpx
    left 26rpx
    width 40rpx
    height 40rpx

button[type=primary]
  font-size 36rpx
  line-height 80rpx
  height 80rpx

.button-block[type=primary]
  background-color $success-color
  margin 20rpx

  &.button-hover
    background-color $success-color-hover

.back-button
  background-color $primary-color
  color white
  display flex
  font-size 32rpx
  margin-left 20rpx
  margin-right 20rpx
  height 70rpx

  &.navigator-hover
    background-color darken($primary-color, 10%)

.small-hints
  border-top 1px solid #DDD
  color #999
  font-size 24rpx
  margin-top 30rpx
  padding-top 20rpx
  text-align center

.invisible
  visibility hidden
